<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"    
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="../TemplateAdmin.xhtml">
        <ui:define name="title">
            <h:outputText value="Statistic Complaint"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:form id="form" style="width: 100%">
                <p:growl id="messages" showDetail="true"/> 
                <h:outputText value="Search By:"/>
                <h:selectOneMenu value="#{complaintController.dateType}">
                    <f:selectItem itemLabel="Date Created" itemValue="0"/>
                    <f:selectItem itemLabel="Date Adjustmented" itemValue="1"/>
                    <p:ajax event="change" update="dataTable" listener="#{complaintController.prepareItemsStt()}"/>
                </h:selectOneMenu>
                <h:outputLabel value="StartDate:" />
                <p:calendar pattern="MM/dd/yyyy" navigator="true" value="#{complaintController.dateStart}" title="date start">
                    <f:convertDateTime pattern="MM/dd/yyyy" />
                    <p:ajax event="dateSelect" update="dataTable" listener="#{complaintController.prepareItemsStt()}"/>
                </p:calendar>
                <h:outputLabel value="EndDate" />
                <p:calendar pattern="MM/dd/yyyy" navigator="true" value="#{complaintController.dateEnd}" title="date end" >
                    <f:convertDateTime pattern="MM/dd/yyyy" />
                    <p:ajax event="dateSelect" update="dataTable" listener="#{complaintController.prepareItemsStt()}"/>
                </p:calendar>
                <!--
                <p:commandButton value="Reload" action="{complaintController.prepareItemsStt()}" update="dataTable"/>
                
                <p:commandButton action="{complaintController.sttGetOrderHasManyComplaint()}" value="View Order has many Complaint">
                    <p:ajax update="dataTable" event="click" listener="{complaintController.sttGetOrderHasManyComplaint()}"/>
                </p:commandButton>
                -->
                <p:dataTable id="dataTable" var="item" value="#{complaintController.itemsStt}"
                             paginator="true" rows="10" paginatorPosition="bottom" resizableColumns="true"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10,15" style="width: 100%" widgetVar="roomTable">
                    <f:facet name="header">
                        <h:outputText value="List of Complaint"/>
                        <p:outputPanel style="float: right">
                            <h:outputText value="Search by all fileds"/>
                            <h:inputText id="globalFilter" onkeyup="roomTable.filter();"/>
                        </p:outputPanel>
                    </f:facet>                

                    <p:column headerText="ID" sortBy="#{item.cpID}" filterMatchMode="exact" filterBy="#{item.cpID}">
                        <h:outputText value="#{item.cpID}" style="width: 100%"/>                   
                    </p:column>
                    <p:column headerText="Order" sortBy="#{item.odID}" filterMatchMode="exact" filterBy="#{item.odID}">
                        <h:outputText value="#{item.odID}" style="width: 100%"/>                   
                    </p:column>
                    <p:column headerText="User" sortBy="#{item.usID.usName}" filterMatchMode="contains" filterBy="#{item.usID.usName}">
                        <h:outputText value="#{item.usID.usName}" style="width: 100%"/>                  
                    </p:column>               
                    <p:column headerText="Description" sortBy="#{item.cpDescription}">
                        <h:outputText value="#{item.cpDescription}"/>                  
                    </p:column>

                    <p:column headerText="Manager" sortBy="#{item.mnID.mnName}" filterMatchMode="contains" filterBy="#{item.mnID.mnName}">
                        <h:outputText value="#{item.mnID.mnName}" style="width: 100%"/>                  
                    </p:column>      
                    <p:column sortBy="#{item.cpCreated}" headerText="Created Date"
                              filterBy="#{item.cpCreated}" filterMatchMode="contains">
                        <h:outputText value="#{item.cpCreated}">
                            <f:convertDateTime pattern="MM/dd/yyyy" />
                        </h:outputText>
                    </p:column>

                    <p:column sortBy="#{item.cpAdjustmented}" headerText="Adjustmented Date"
                              filterBy="#{item.cpAdjustmented}" filterMatchMode="contains">                      
                        <h:outputText value="#{item.cpAdjustmented}">
                            <f:convertDateTime pattern="MM/dd/yyyy" />
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Status" sortBy="#{item.cpStatus}"
                              filterBy="#{item.cpStatus}" filterMatchMode="contains">
                        <h:outputText value="#{item.cpStatus}"/>                 
                    </p:column>   
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value=""/>
                        </f:facet>
                        <p:commandButton action="#{complaintController.sttView(item)}"   icon="ui-icon-extlink"                                             
                                         title="Detail" value="Detail"  >
                        </p:commandButton>                       
                    </p:column>
                </p:dataTable>

            </h:form>    
        </ui:define>
    </ui:composition>
</html>

